<template>
	<!-- #ifdef H5 -->
	<td class="uni-table-td table-bold" :rowspan="rowspan" :colspan="colspan" :class="{ 'table--border': border }"
		:style="{ width: customWidth + 'px', 'text-align': align }">
			<slot></slot>
		</view>
	</td>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<!-- :class="{'table--border':border}"  -->
	<view class="uni-table-td table-bold" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
		<slot></slot>
	</view>
	<!-- #endif -->
</template>

<script>
/**
 * Td 单元格
 * @description 表格中的标准单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 */
export default {
	name: 'uniTd',
	options: {
		virtualHost: true
	},
	props: {
		width: {
			type: [String, Number],
			default: ''
		},
		align: {
			type: String,
			default: 'left'
		},
		rowspan: {
			type: [Number, String],
			default: 1
		},
		colspan: {
			type: [Number, String],
			default: 1
		}
	},
	data() {
		return {
			border: false
		};
	},
	computed: {
		// 根据props中的width属性 自动匹配当前th的宽度(px)
		customWidth() {
			if (typeof this.width === 'number') {
				return this.width
			} else if (typeof this.width === 'string') {
				let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
				let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
				let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
				if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
					return this.width.replace('px', '')
				} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
					let numberRpx = Number(this.width.replace('rpx', ''))
					let widthCoe = uni.getSystemInfoSync().screenWidth / 750
					return Math.round(numberRpx * widthCoe)
				} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
					return this.width
				} else if (this.width.includes('%')) {
					let num = (this.width.split('%')[0] / 100).toFixed(2);
					let widthCoe = uni.getSystemInfoSync().windowWidth;
					return widthCoe * num;
				} else { // 不符合格式
					return ''
				}
			} else {
				return ''
			}
		},
	},
	created() {
		this.root = this.getTable()
		this.border = this.root.border
	},
	methods: {
		/**
		 * 获取父元素实例
		 */
		getTable() {
			let parent = this.$parent;
			let parentName = parent.$options.name;
			while (parentName !== 'uniTable') {
				parent = parent.$parent;
				if (!parent) return false;
				parentName = parent.$options.name;
			}
			return parent;
		},
	}
}
</script>

<style lang="scss">
$border-color: #FAFAFA;

.uni-table-td {
	display: table-cell;
	padding: 8px 10px 4px;
	box-sizing: border-box;
	font-size: 14px;
	border-bottom: 0 $border-color solid;
	font-weight: 400;
	color: #121317;
	line-height: 18px;
	vertical-align: middle;
}
.uni-table-td-row {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
}
.uni-table-td-content{
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
}
.table--border {
	border-right: 0 $border-color solid;
}
</style>
